<template>
  <div class="list-contain">
    <div class="list-contain-kanban">
      <div class="kanban-header">待办的</div>
        <div class="kanban-body">
          <el-scrollbar style="height:100%">
            <div class="kanban-card one" v-for="item in statusList.one" :key="item.id">
              <div class="kanban-card-header" @click="handleDetail(item.id)">{{ item.name }}</div>
              <div class="kanban-card-label">
                <span class="card-priority">
                  {{ item.priority === 1 ? '无优先级' : item.priority === 2 ? '不重要' : item.priority === 3 ? '次要' : item.priority === 4 ? '主要' : '重要' }}
                </span>
                <template v-if="item.tag !== ''">
                  <span v-for="(one, index) in item.tag.split(',')" class="card-tag" :key="index">{{ one }}</span>
                </template>
              </div>
              <div class="kanban-card-bottom">
                <div class="bottom-time"><i class="el-icon-time"></i> {{ item.end_time }}</div>
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" v-if="item.status === 1">
                      <i class="el-icon-help"></i>
                    </span>
                    <span class="el-dropdown-link" v-else-if="item.status === 2">
                      <i class="el-icon-time"></i>
                    </span>
                    <span class="el-dropdown-link" v-else-if="item.status === 3">
                      <i class="el-icon-circle-check"></i>
                    </span>
                    <span class="el-dropdown-link" v-else>
                      <i class="el-icon-circle-close"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :class="item.status === 1 ? 'active' : ''" icon="el-icon-help" :command="() => updateStatus(item, 1)">待办的</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 2 ? 'active' : ''" icon="el-icon-time" :command="() => updateStatus(item, 2)">进行中</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 3 ? 'active' : ''" icon="el-icon-circle-check" :command="() => updateStatus(item, 3)">已完成</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 4 ? 'active' : ''" icon="el-icon-circle-close" :command="() => updateStatus(item, 4)">已拒绝</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
              </div>
            </div>
          </el-scrollbar>
        </div>
    </div>
    <div class="list-contain-kanban">
      <div class="kanban-header">进行中</div>
        <div class="kanban-body">
          <el-scrollbar style="height:100%">
            <div class="kanban-card two" v-for="item in statusList.two" :key="item.id">
              <div class="kanban-card-header" @click="handleDetail(item.id)">{{ item.name }}</div>
              <div class="kanban-card-label">
                <span class="card-priority">
                  {{ item.priority === 1 ? '无优先级' : item.priority === 2 ? '不重要' : item.priority === 3 ? '次要' : item.priority === 4 ? '主要' : '重要' }}
                </span>
                <template v-if="item.tag !== ''">
                  <span v-for="(one, index) in item.tag.split(',')" class="card-tag" :key="index">{{ one }}</span>
                </template>
              </div>
              <div class="kanban-card-bottom">
                <div class="bottom-time"><i class="el-icon-time"></i> {{ item.end_time }}</div>
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" v-if="item.status === 1">
                      <i class="el-icon-help"></i>
                    </span>
                    <span class="el-dropdown-link" v-else-if="item.status === 2">
                      <i class="el-icon-time"></i>
                    </span>
                    <span class="el-dropdown-link" v-else-if="item.status === 3">
                      <i class="el-icon-circle-check"></i>
                    </span>
                    <span class="el-dropdown-link" v-else>
                      <i class="el-icon-circle-close"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :class="item.status === 1 ? 'active' : ''" icon="el-icon-help" :command="() => updateStatus(item, 1)">待办的</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 2 ? 'active' : ''" icon="el-icon-time" :command="() => updateStatus(item, 2)">进行中</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 3 ? 'active' : ''" icon="el-icon-circle-check" :command="() => updateStatus(item, 3)">已完成</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 4 ? 'active' : ''" icon="el-icon-circle-close" :command="() => updateStatus(item, 4)">已拒绝</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
              </div>
            </div>
          </el-scrollbar>
        </div>
    </div>
    <div class="list-contain-kanban">
      <div class="kanban-header">已完成</div>
        <div class="kanban-body">
          <el-scrollbar style="height:100%">
            <div class="kanban-card three" v-for="item in statusList.three" :key="item.id">
              <div class="kanban-card-header" @click="handleDetail(item.id)">{{ item.name }}</div>
              <div class="kanban-card-label">
                <span class="card-priority">
                  {{ item.priority === 1 ? '无优先级' : item.priority === 2 ? '不重要' : item.priority === 3 ? '次要' : item.priority === 4 ? '主要' : '重要' }}
                </span>
                <template v-if="item.tag !== ''">
                  <span v-for="(one, index) in item.tag.split(',')" class="card-tag" :key="index">{{ one }}</span>
                </template>
              </div>
              <div class="kanban-card-bottom">
                <div class="bottom-time"><i class="el-icon-time"></i> {{ item.end_time }}</div>
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" v-if="item.status === 1">
                      <i class="el-icon-help"></i>
                    </span>
                    <span class="el-dropdown-link" v-else-if="item.status === 2">
                      <i class="el-icon-time"></i>
                    </span>
                    <span class="el-dropdown-link" v-else-if="item.status === 3">
                      <i class="el-icon-circle-check"></i>
                    </span>
                    <span class="el-dropdown-link" v-else>
                      <i class="el-icon-circle-close"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :class="item.status === 1 ? 'active' : ''" icon="el-icon-help" :command="() => updateStatus(item, 1)">待办的</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 2 ? 'active' : ''" icon="el-icon-time" :command="() => updateStatus(item, 2)">进行中</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 3 ? 'active' : ''" icon="el-icon-circle-check" :command="() => updateStatus(item, 3)">已完成</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 4 ? 'active' : ''" icon="el-icon-circle-close" :command="() => updateStatus(item, 4)">已拒绝</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
              </div>
            </div>
          </el-scrollbar>
        </div>
    </div>
    <div class="list-contain-kanban">
      <div class="kanban-header">已拒绝</div>
        <div class="kanban-body">
          <el-scrollbar style="height:100%">
            <div class="kanban-card four" v-for="item in statusList.four" :key="item.id">
              <div class="kanban-card-header" @click="handleDetail(item.id)">{{ item.name }}</div>
              <div class="kanban-card-label">
                <span class="card-priority">
                  {{ item.priority === 1 ? '无优先级' : item.priority === 2 ? '不重要' : item.priority === 3 ? '次要' : item.priority === 4 ? '主要' : '重要' }}
                </span>
                <template v-if="item.tag !== ''">
                  <span v-for="(one, index) in item.tag.split(',')" class="card-tag" :key="index">{{ one }}</span>
                </template>
              </div>
              <div class="kanban-card-bottom">
                <div class="bottom-time"><i class="el-icon-time"></i> {{ item.end_time }}</div>
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" v-if="item.status === 1">
                      <i class="el-icon-help"></i>
                    </span>
                    <span class="el-dropdown-link" v-else-if="item.status === 2">
                      <i class="el-icon-time"></i>
                    </span>
                    <span class="el-dropdown-link" v-else-if="item.status === 3">
                      <i class="el-icon-circle-check"></i>
                    </span>
                    <span class="el-dropdown-link" v-else>
                      <i class="el-icon-circle-close"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :class="item.status === 1 ? 'active' : ''" icon="el-icon-help" :command="() => updateStatus(item, 1)">待办的</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 2 ? 'active' : ''" icon="el-icon-time" :command="() => updateStatus(item, 2)">进行中</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 3 ? 'active' : ''" icon="el-icon-circle-check" :command="() => updateStatus(item, 3)">已完成</el-dropdown-item>
                      <el-dropdown-item :class="item.status === 4 ? 'active' : ''" icon="el-icon-circle-close" :command="() => updateStatus(item, 4)">已拒绝</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
              </div>
            </div>
          </el-scrollbar>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status: null,
      statusList: {
        one: [],
        two: [],
        three: [],
        four: []
      }
    }
  },
  props: {
    list: Object,
    detail: Object
  },
  created () {
    this.init()
  },
  methods: {
    handleDetail (id) {
      this.detail.open(id)
    },
    init () {
      this.getStatusList(1, (data) => {
        this.statusList.one = data
      })
      this.getStatusList(2, (data) => {
        this.statusList.two = data
      })
      this.getStatusList(3, (data) => {
        this.statusList.three = data
      })
      this.getStatusList(4, (data) => {
        this.statusList.four = data
      })
    },
    handleCommand (func) {
      func()
    },
    updateStatus (item, status) { // 修改状态
      const params = {
        id: item.id,
        status: status
      }
      this.$API({
        name: 'UpdateProjectTask',
        data: params,
        requireAuth: true
      }).then(res => {
        if (res.data.code === 200 && res.data.data[0] === 1) {
          this.init()
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
      })
    },
    getStatusList (status = this.list.filters.status, callback) { // 获取列表
      this.$API({
        name: 'GetProjectTaskList',
        params: {
          page: 1,
          size: 10000,
          pid: this.$route.params.id,
          search: this.list.filters.search,
          order: this.list.filters.prop,
          sort: this.list.filters.order,
          status: status,
          priority: this.list.filters.priority
        },
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          callback(res.data.data.data)
        } else {
          this.$message.error(res.data.msg)
          callback([])
        }
      }).catch(error => {
        this.$message.error(error)
      })
      
    }
  }
}
</script>

<style lang="scss">
.active {
  color: #409EFF;
}
.list-contain-kanban {
  margin-top: 5px;
  flex: 1;
  flex-shrink: 0;
  height: 100%;
  border: 1px solid #dcdcdc;
  margin-right: 10px;
  border-radius: 4px;
  &:nth-child(4) {
    margin-right: 0;
  }    
  .kanban-header {
    font-weight: bold;
    padding: 10px 5px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #dcdcdc;
    background: rgba(136, 136, 136, 0.04);
  }
  .kanban-body {
    background: #f5f6f8;
    padding: 8px 0 0 8px;
    height: calc(100% - 40px);
    .el-scrollbar__view {
      margin-right: 8px;
    }
    .one {
      border-left: 4px solid rgb(254, 115, 0);
    }
    .two {
      border-left: 4px solid rgb(74, 144, 226);
    }
    .three {
      border-left: 4px solid rgb(254, 188, 8);
    }
    .four {
      border-left: 4px solid rgb(236, 0, 25);
    }
    .kanban-card {
      background: #fff;
      height: auto;
      padding: 15px;
      margin: 0 2px 8px 0;
      box-shadow: 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31);
      .kanban-card-header {
        margin-bottom: 8px;
        color: #555;
        cursor: pointer;
        &:hover {
          color: slateblue;
        }
      }
      .kanban-card-label {
        .card-priority {
          padding: 2px;
          border-radius: 4px;
          color: rgb(0, 140, 255);
          font-size: 12px;
          border: 1px solid rgb(0, 140, 255);
          margin-right: 4px;
        }
        .card-tag {
          padding: 2px;
          border-radius: 4px;
          color: #fff;
          background: orange;
          font-size: 12px;
          border: 1px solid orange;
          margin-right: 4px;
        }
      }
      .kanban-card-bottom {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .bottom-time {
          font-size: 14px;
          color: #777;
        }
        .el-dropdown-link {
          font-size: 18px;
        }
      }
    }
  }
}
</style>